<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
  <link href="css/bootstrap.min.css" rel="stylesheet"/>
  <script src="../jquery/jquery-3.3.1.min.js"></script>
  <style>
    #banner{
        width: 100%;
        height: 300px;
    }
    h1{
        text-align: center;
    }
    img{
        width: 260px;
        height: 300px;
    }
    #ydj{
        margin: auto;
    }
    div.container{
        height: 1500px;
    }
    .zjimg{
        width:400px ;
        height: 300px;
    }
    button{
        width: 100px;
        height: 60px;
        margin: 30px;
    }
    #jc1{
        width:400px ;
        height: 300px;
    }
  </style>
    <script>
        var imgs=["../img/choujiang/yx1.jpg","../img/choujiang/yx2.jpg","../img/choujiang/yx2.jpg",
            "img/choujiang/yx4.jpg","img/choujiang/yx5.jpg","img/choujiang/yx6.jpg","img/choujiang/yx7.jpg",
            "img/choujiang/yx8.jpg","img/choujiang/yx9.jpg","img/choujiang/yx10.jpg","img/choujiang/yx11.jpg"];
        var startId;//开始定时器的id
        var index;//随机角标
        $(function (){
            $("#startId").prop("disabled",false);
            $("#endId").prop("disabled",true);
            $("#startId").click(function (){
                $("#startId").prop("disabled",true);
                $("#endId").prop("disabled",false);
                startId=setInterval(function (){
                   index= Math.floor(Math.random()*imgs.length);

                   $("#jc1").prop("src",imgs[index]);

                },100);
            });
            $("#endId").click(function (){

                $("#startId").prop("disabled",false);
                $("#endId").prop("disabled",true);
                clearInterval(startId);
                $("#ydjimg").prop("src",imgs[index]).hide();
                $("#ydjimg").show(3000);

            });
        })

    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <img id="banner" src="../img/0banner.jpg"/>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h1>英雄抽奖</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h3>奖池</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">
          <img class="img-thumbnail" src="../img/moren.png" id="jc1">
        </div>
        <div class="col-xs-3">

        </div>
        <div class="col-xs-3">

        </div>
        <div class="col-xs-3">

        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h3>一等奖</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div id="ydj">
<!--                <img class="img-thumbnail zjimg" src="img/tx.jpg" id="ydjimg">-->
                <img class="zjimg" src="../img/tx.jpg" id="ydjimg">
            </div>
        </div>
    </div>
    <div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4">
            <button class="btn-primary" id="startId">开始抽奖</button>
            <button class="btn-success" id="endId">结束抽奖</button>
        </div>
        <div class="col-lg-4"></div>
    </div>
</div>

</body>
</html>